<style lang='scss' type='stylesheet/scss' scoped>
.as-input {
  margin-bottom: 10px;
}
</style>
<template>
  <div>
    <as-h2>focus / blur / input</as-h2>
    <as-card :text="text"
             title="可以监听 as-input 的事件，focus 聚焦 / blur 失焦 / input 输入时">
      <as-input v-model="name"
                placeholder="请输入姓名"
                @input="hanlderInput"
                @focus="handlerFocus"
                @blur="handlerBlur"></as-input>
      {{state}}
    </as-card>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from "vuex";
export default {
  name: "",
  computed: {
    ...mapGetters(["isMobile"])
  },
  data() {
    return {
      state: "输入一些内容",
      name: "12345678901",
      timeout: null,
      text: `<template>
   <div>
     <as-input v-model="name" placeholder="请输入姓名" @input="hanlderInput" @focus="handlerFocus" @blur="handlerBlur"></as-input>
     {{state}}
   </div>
 </template>
 <script>  
   export default {
     data() {
       return {
         state: "输入一些内容",
         name: "12345678901",
         timeout: null,
       }
     },
     methods: {
       hanlderInput() {
         clearTimeout(this.timeout);
         this.state = "正在输入...";
         this.cleanState();
       },
       handlerFocus(){
         this.state = "已聚焦";
         this.cleanState();
       },
       handlerBlur(){
         this.state = "已失焦";
         this.cleanState();
       },
       cleanState(){
         this.timeout = setTimeout(() => {
           this.state = "停止输入";
         }, 500);
       }
     }
   }
 <\/script>`
    };
  },
  methods: {
    hanlderInput() {
      clearTimeout(this.timeout);
      this.state = "正在输入...";
      this.cleanState();
    },
    handlerFocus() {
      this.state = "已聚焦";
      this.cleanState();
    },
    handlerBlur() {
      this.state = "已失焦";
      this.cleanState();
    },
    cleanState() {
      this.timeout = setTimeout(() => {
        this.state = "停止输入";
      }, 500);
    }
  }
};
</script>
